<template>
  <div class="server">

    <app-head title="开服" :noneBack="true" v-if="false"></app-head>

    <Tab :items="tabItems" :active="tabActive" @change="tabChange"/>

    <Scroll :data="serverList" action="getServerList" :params="serverParams">
      <GameList slot="scrollInner" :content="serverList.list" direction="column" item="full" type="server"/>
    </Scroll>

    <TabBar/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Tab from '@/components/tab/Index'
import TabBar from '@/components/tab/Bar'
import Scroll from '@/components/common/Scroll'
import GameList from '@/components/game/List'

export default {
  name: 'gameServer',
  components: {
    Tab,
    TabBar,
    Scroll,
    GameList
  },
  computed: {
    ...mapGetters([
      'currServerList',
      'nextServerList',
      'prevServerList'
    ]),

    serverList () {
      let list = ['currServerList', 'nextServerList', 'prevServerList']
      return this[list[this.tabActive]]
    },

    serverParams () {
      return {
        server_type: this.tabActive + 1
      }
    }
  },
  data () {
    return {
      tabActive: 0,
      tabItems: ['今日开服', '即将开服', '历史开服']
    }
  },
  methods: {
    tabChange (index) {
      this.tabActive = index
    }
  },
  created () {
    // 1今日 2即将 3已开服
    this.$store.dispatch('getServerList', {
      server_type: 1
    })
    this.$store.dispatch('getServerList', {
      server_type: 2
    })
    this.$store.dispatch('getServerList', {
      server_type: 3
    })
  }
}
</script>

<style scoped lang="scss">
.server {
  padding-bottom: 0.51rem;
}

.tab {
  height: 0.54rem;
  border-bottom: 0.1rem solid #f8f8f8;
}
</style>
